<template>
  <a-modal title-align="start" title="调整广告" :mask-closable="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="1200">
    <a-descriptions :data="basicInfo" :align="{ label: 'right' }" />
    <a-tabs v-model:active-key="curPage" size="mini">
      <a-tab-pane key="adverGroup" title="广告组"> </a-tab-pane>
      <a-tab-pane key="adverSpace" title="广告位"> </a-tab-pane>
      <a-tab-pane key="goods" title="商品"> </a-tab-pane>
      <a-tab-pane key="keyword" title="关键词"> </a-tab-pane>
      <a-tab-pane key="denyKeyword" title="否定词"> </a-tab-pane>
      <a-tab-pane key="searchKeyWord" title="搜索词"> </a-tab-pane>
    </a-tabs>
    <div class="mt5">
      <adverGroup v-if="curPage == 'adverGroup'" :info="props.info" />
      <adverSpace v-if="curPage == 'adverSpace'" :info="props.info" />
      <goods v-if="curPage == 'goods'" :info="props.info" />
      <keyword v-if="curPage == 'keyword'" :info="props.info" />
      <denyKeyword v-if="curPage == 'denyKeyword'" :info="props.info" />
      <searchKeyWord v-if="curPage == 'searchKeyWord'" :info="props.info" />
    </div>
    <template #footer class="modal-footer">
      <a-button @click="showvisible = false">取消</a-button>
      <a-button type="primary" @click="showvisible = false">确定</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { onMounted, ref, computed } from 'vue'
  import { AdStatusHandle, AdTypesTag, DynamicBudgetStrategy } from '../../../types'
  import adverGroup from './adverGroup.vue'
  import adverSpace from './adverSpace.vue'
  import goods from './goods.vue'
  import keyword from './keyword.vue'
  import denyKeyword from './denyKeyword.vue'
  import searchKeyWord from './searchKeyWord.vue'
  let props = defineProps(['modelValue', 'type', 'info'])
  let emits = defineEmits(['save', 'update:modelValue'])
  let showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })
  let curPage = ref('adverGroup')
  let basicInfo = ref([
    { code: 'shopName', label: '店铺:', value: 'Socrates' },
    { code: 'campaignName', label: '广告活动:', value: 'Socrates' },
    { code: 'state', label: '状态:', value: 'Socrates' },
    { code: 'portfolioName', label: '组合名称:', value: 'Socrates' },
    { code: 'operationsName', label: '销售员:', value: 'Socrates' },
    { code: 'adType', label: '类型:', value: 'Socrates' },
    { code: 'targetingType', label: '投放类型:', value: 'Socrates' },
    { code: 'dynamicBudgetStrategy', label: '竞价策略:', value: 'Socrates' },
  ])

  const setBasicInfo = () => {
    basicInfo.value.forEach((e) => {
      e.value = props.info[e.code]
      switch (e.code) {
        case 'state':
          e.value = AdStatusHandle[props.info.state]
          break
        case 'adType':
          e.value = AdTypesTag[props.info.adType]
          break
        case 'dynamicBudgetStrategy':
          e.value = DynamicBudgetStrategy[props.info.dynamicBudgetStrategy]
          break
        default:
          e.value = props.info[e.code]
          break
      }
    })
  }
  onMounted(() => {
    setBasicInfo()
  })
</script>

<style lang="less" scoped></style>
